﻿<%@ Page Title="" Language="C#" MasterPageFile="~/SiteRequireLogin.Master" AutoEventWireup="true" CodeBehind="KPI-QuanLyNhanSu.aspx.cs" Inherits="TranTekBE.KPI_QuanLyNhanSu" %>

<%@ Register Src="~/KPI-NhanSu/Menu-KPI.ascx" TagPrefix="uc1" TagName="MenuKPI" %>






<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="BodyContent" runat="server">




    <%--<script type="text/javascript" src="../Scripts/progress.js.pagespeed.jm.GmQJqX-sEi.js"></script>--%>
    <script type="text/javascript" src="../Scripts/797fc2403b5a640373b9e1efe90fdf14-js_defer.js"></script>

    <script type="text/javascript" src="../KPI-NhanSu/styleschedule/fullcalendar.min.js"></script>



    <link rel="stylesheet" type="text/css" href="../KPI-NhanSu/styleschedule/main.css" />
    <link rel="stylesheet" type="text/css" href="../KPI-NhanSu/styleschedule/fullcalendar.css" />
    <link rel="stylesheet" type="text/css" href="../KPI-NhanSu/styleschedule/fullcalendar(1).css" />
    <!---->
    <link href="../StyleSlider/idangerous.swiper.css" rel="stylesheet" />
    <link href="../StyleSlider/main.css" rel="stylesheet" />
    <script src="../StyleSlider/main.js"></script>
    <script src="../StyleSlider/idangerous.swiper.js"></script>

    <!----->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <!-- Script Progress bar -->
    <script type="text/javascript">
        (function ($)
        {
            $.fn.animateProgress = function (progress, callback) {
                return this.each(function () {
                    $(this).animate({ width: progress + '%' }, {
                        duration: 2000, easing: 'swing', step: function (progress) {
                            var labelEl = $('.ui-label', this), valueEl = $('.value', labelEl);
                            if (Math.ceil(progress) < 20 && $('.ui-label', this).is(":visible")) { labelEl.hide(); }
                            else
                            {
                                if (labelEl.is(":hidden")) { labelEl.fadeIn(); };
                            }
                            if (Math.ceil(progress) == 100) { labelEl.text('Done'); setTimeout(function () { labelEl.fadeOut(); }, 1000); }
                            else
                            {
                                valueEl.text(Math.ceil(progress) + '%');
                            }
                        }, complete: function (scope, i, elem) {
                            if (callback) { callback.call(this, i, elem); };
                        }
                    });
                });
            };
        })(jQuery);
        $(function ()
        {
            $('#progress_bar .ui-progress .ui-label').hide();
            $('#progress_bar .ui-progress').css('width', '7%');
            $('#progress_bar .ui-progress').animateProgress(43,
                function () {
                    $(this).animateProgress(79,
                        function () {
                            setTimeout(
                                function () {
                                    $('#progress_bar .ui-progress').animateProgress(<%= get_power_user_percent%>,
                                                function ()
                                                {
                                                    $('#main_content').slideDown(); $('#fork_me').fadeIn();
                                                });
                                }, 2000);
                        });
                });
        });
    </script>
    <!-- Script Progress bar -->
    <script type='text/javascript'>
        $(document).ready(function(){
            var number_ach = <%=get_number_achievements%>;
            if(number_ach == 0)
            {
                $('#finerecord_manager').css('margin-top',746+'px');
                $('#no_left_right_content').css('margin-top',960+'px');
            }
            else 
            {
                if (number_ach <=8 && number_ach >=1)
                {
                    $('#finerecord_manager').css('margin-top',875+'px');
                    $('#no_left_right_content').css('margin-top',1090+'px');
                }
                else
                {
                    $('#finerecord_manager').css('margin-top',990+'px');
                    $('#no_left_right_content').css('margin-top',1205+'px');
                }
            }
        });
    </script>
    <script type="text/javascript">
        var ToDay = new Date('<%=DateTime.Now.ToShortDateString()%>');
        //alert(ToDay);

    </script>

    <script type="text/javascript">

        $(document).ready(function() {
	               

            $('#calendar').fullCalendar({
                monthNames: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10 ', 'Tháng 11', 'Tháng 12'],
                monthNamesShort: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10 ', 'Tháng 11', 'Tháng 12'],
                dayNames: ['Chủ Nhật,', 'Thứ 2,', 'Thứ 3,', 'Thứ 4,', 'Thứ 5,', 'Thứ 6,', 'Thứ 7,'],
                dayNamesShort: ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'],
                //
                buttonText: {
                    today: 'Hôm nay',
                    day: 'Ngày',
                    week: 'Tuần',
                    month: 'Tháng'
                },
                events: [<%=JsonStringSchedule%>],
                eventAfterAllRender: function ()
                { ChangColor(); },
                dayRender: function (date, cell) {
                    if (date < ToDay) {
                        $(cell).addClass('disabled');
                    }
                },
                eventRender: function (event, element) {
                    if (event.start < ToDay) {
                        element.find('.fc-event-inner').parent("div").addClass("item-disable");
                    }

                },
                eventClick: function(calEvent, jsEvent, view) {
                    //alert(calEvent.title);
                    //var TitleClickEvent = calEvent.title;
                    //var DateCLickEvent = (calEvent.start.getMonth() + 1) + '/' + calEvent.start.getDate() + '/' + calEvent.start.getFullYear();
                    //var IdClickEvent = calEvent.id;
                    //alert(TitleClickEvent +","+ DateCLickEvent +","+ IdClickEvent);
                    //ajax save data when move the event
                    var IdClickEvent = calEvent.id;
                    if (calEvent.start >= ToDay) {
                        OpenDialog("Yêu cầu chuyển ca", "Yeu-Cau-Chuyen-Ca.aspx?idevent="+IdClickEvent, 450, 600);
                        //alert(1);
                    }

                }
            });
		
        });

    </script>
    <!--End js Schedule-->

    <!--Line Chart-->
    <script type="text/javascript">
        function drawVisualization() {
            var data = google.visualization.arrayToDataTable([
              <%= JsonString %>
            ]);

            var formatter = new google.visualization.NumberFormat(
            {negativeColor: 'red', negativeParens: true, pattern: '###,### đ'});
            formatter.format(data, 1); 
            formatter.format(data, 2); 

            var options = {
                seriesType: "bars",
                series: {1: {type: "line"}}
            };

            var chart = new google.visualization.ComboChart(document.getElementById('line_chart'));
            chart.draw(data, options);
        }
        google.setOnLoadCallback(drawVisualization);
    </script>

    <!--Column Chart-->
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var json = <%= JsonStringColumn %>;// Get biến từ Server qua Client
            
            //alert(json);
            var arr = [ ["Thời gian", "Chuyên Môn","Thái Độ","Giao Tiếp", "Đồng Phục", "Năng Lượng", "Kiểm Kê"] ];
            
            json.res.forEach(function(item) { 
                arr.push( [ item.time, item.chuyenmon,item.thaido,item.giaotiep,item.dongphuc,item.nangluong,item.kiemke ] );// push array
            });
            //alert(arr);
            var data = google.visualization.arrayToDataTable(arr);

            var options = {
                //title: 'Biểu đồ tiêu chuẩn đánh giá',//Name chart
                //hAxis: { title: 'Tiêu Chuẩn', titleTextStyle: { color: 'red' } }
            };
            var chart = new google.visualization.ColumnChart(document.getElementById('column_chart'));//Paint chart
            chart.draw(data, options);
        }
    </script>

    <!--Progressbar-->
    <style type="text/css">
        @-webkit-keyframes animate-stripes {
            from {
                background-position: 0 0;
            }

            to {
                background-position: 44px 0;
            }
        }

        .ui-progress-bar {
            position: relative;
            height: 35px;
            padding-right: 2px;
            background-color: #abb2bc;
            border-radius: 35px;
            -moz-border-radius: 35px;
            -webkit-border-radius: 35px;
            background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#b6bcc6),color-stop(1,#9da5b0));
            background: -moz-linear-gradient(#9da5b0 0%,#b6bcc6 100%);
            -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
            -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
            box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
        }

        .ui-progress {
            position: relative;
            display: block;
            overflow: hidden;
            height: 33px;
            -moz-border-radius: 35px;
            -webkit-border-radius: 35px;
            border-radius: 35px;
            -webkit-background-size: 44px 44px;
            background-color: #74d04c;
            background: -webkit-gradient(linear, 0 0, 44 44, color-stop(0.00, rgba(255,255,255,0.17)), color-stop(0.25, rgba(255,255,255,0.17)), color-stop(0.26, rgba(255,255,255,0)), color-stop(0.50, rgba(255,255,255,0)), color-stop(0.51, rgba(255,255,255,0.17)), color-stop(0.75, rgba(255,255,255,0.17)), color-stop(0.76, rgba(255,255,255,0)), color-stop(1.00, rgba(255,255,255,0)) ), -webkit-gradient(linear, left bottom, left top, color-stop(0, #74d04c), color-stop(1, #9bdd62));
            background: -moz-repeating-linear-gradient(top left -30deg, rgba(255,255,255,0.17), rgba(255,255,255,0.17) 15px, rgba(255,255,255,0) 15px, rgba(255,255,255,0) 30px ), -moz-linear-gradient(#9bdd62 0%, #74d04c 100%);
            -webkit-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
            -moz-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
            box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
            border: 1px solid #4c8932;
            -webkit-animation: animate-stripes 2s linear infinite;
        }

            .ui-progress span.ui-label {
                font-size: 1.2em;
                position: absolute;
                right: 0;
                line-height: 33px;
                padding-right: 12px;
                color: rgba(0,0,0,.6);
                text-shadow: rgba(255,255,255,.45) 0 1px 0px;
                white-space: nowrap;
            }


        .css_ca1 {
            color: #090;
            border-color: #090;
        }

        .disabled {
            /*background-color: #DADADA;*/
        }

        .item-disable {
            opacity: 0.4 !important;
        }
    </style>

    <!------------------------------------------------------------------------------------------------>


    <div id="left_content">
        <asp:Label ID="lbErr" runat="server"></asp:Label>
        <!--Menu KPI-->
        <uc1:MenuKPI runat="server" ID="MenuKPI" />
        <!------------>

        <div id="user">
            <div id="user_image">
                <asp:Literal ID="avatar_user" runat="server"></asp:Literal>
            </div>
            <div id="user_name">
                <b style="color: #06C">
                    <asp:Label ID="user_name_info" runat="server" Text="Tên người dùng"></asp:Label></b>
            </div>
            <div id="user_info">
                <b style="color: #06C">Cửa hàng:
                    <asp:Label ID="user_info_store" runat="server" Text="Thông tin thêm"></asp:Label></b>
            </div>
        </div>
        <div id="power">
            <!-- Progress bar -->

            <div id="progress_bar" class="ui-progress-bar ui-container">
                <div class="ui-progress" style="width: 100%; display: block;">
                    <span class="ui-label" style="display: none;">
                        <asp:Literal ID="ltpower_user" runat="server"></asp:Literal>%</span>
                </div>
            </div>
            <!-- Progress bar -->
        </div>

        <div id="schedule">
            <div id="calendar" style="font-size: 13px" class="fc fc-ltr"></div>
        </div>
    </div>
    <!--End content left-->
    <!------------------------------------------------------------------------------------------------>
    <div id="right_content">
        <div style="margin-left: 250px;position:relative;z-index:9999999;color: #06C; font-style: italic; font-weight: bold;margin-top: 20px;">
            <asp:DropDownList ID="droplist_Month_1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="droplist_Month_1_SelectedIndexChanged">
            </asp:DropDownList>
        </div>
        <div id="line_chart">
        </div>
        <div style="margin-left: 83px; color: #06C; font-style: italic; font-weight: bold">
            Biểu đồ 1: Doanh số bán hàng tháng
            <asp:Literal ID="ltGetMonth" runat="server"></asp:Literal>
            tính đến ngày
            <asp:Literal ID="ltGetDay" runat="server"></asp:Literal>
            (ĐVT: VNĐ)
        </div>
        <div style="position:relative;z-index:9999999;margin-left: 250px;color: #06C; font-style: italic; font-weight: bold;margin-top: 20px;">
            <asp:DropDownList ID="droplist_Month_2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="droplist_Month_2_SelectedIndexChanged">
            </asp:DropDownList>
        </div>
        <div id="column_chart">
        </div>
        <div style="margin-left: 104px; color: #06C; font-style: italic; font-weight: bold">
            Biểu đồ 2: Đánh giá tiểu chuẩn nhân viên tháng
            <asp:Literal ID="lt_danhgia_tieuchuan" runat="server"></asp:Literal>
            (ĐVT: Điểm)
        </div>
    </div>
    <!--End content right-->
    <div id="news">
        <b style="float: left; color: #006796">Tin tức mới:</b>

        <div class="swiper-main-device">
            <div class="pagination">
            </div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <asp:Literal runat="server" ID="ltlDivDynamic_news"></asp:Literal><!--Gọi Div Code-->
                </div>
            </div>
        </div>
    </div>
    <div id="coin_icon">
        <h3 style="float: left; color: #006796">Bạn đã có được <%= get_number_achievements %> achievements!</h3>
        <table border="0" cellpadding="1" cellspacing="1" style="width: 100%; padding: 10px; margin-top: 10px">
            <tbody>
                <tr>
                    <td>
                        <asp:Literal runat="server" ID="ltlDivDynamic_img"></asp:Literal><!--Gọi Div Code-->
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="finerecord_manager">
        <div id="finerecord">
            <strong>Đánh giá & Nhận xét của BGĐ Pharmacity và Quản lý (trong tháng)</strong>

            <table class="table table-striped table-framed table-centered" style="width: 506px; margin-top: 28px; position: absolute;">
                <thead>
                    <tr>
                        <th width="30px" class="tdGrid tdCenterM">STT.</th>
                        <th class="tdGrid tdCenterM">Nhận Xét</th>
                        <th width="55px" class="tdGrid tdCenterM">Ngày</th>
                    </tr>
                </thead>
                <tbody>
                    <asp:Repeater ID="rpManager" runat="server">
                        <ItemTemplate>
                            <tr style="<%# ThuVien.FunctionsUtils.CSS_RowInTable(Container.ItemIndex,"#FFFFE0","#D7E3F2") %>">
                                <td width="30px" class="tdGrid tdCenterM"><%# Container.ItemIndex + 1 %></td>
                                <td class="tdGrid tdCenterM">
                                    <a class="tooltip" style="color: #000">
                                        <%#(Eval("BINH_LUAN").ToString().Length>50)?Eval("BINH_LUAN").ToString().Substring(0,40)+"...":Eval("BINH_LUAN")
                                        %>
                                        <span>
                                            <%# Eval("BINH_LUAN")%>
                                        </span>
                                    </a>
                                </td>
                                <!--chua format date time-->
                                <td width="130px" class="tdGrid tdCenterM">
                                    <%# Eval("NGAY_TAO") %>
                                </td>

                            </tr>
                        </ItemTemplate>
                    </asp:Repeater>

                    <div style="overflow: hidden; position: absolute; margin-top: 5px;">
                        <asp:Repeater ID="rptPages_Manager" runat="server"
                            OnItemCommand="rptPages_ItemCommand_Manager">

                            <ItemTemplate>

                                <asp:LinkButton ID="btnPage_Manager"
                                    Style="padding: 1px 3px; margin: 1px; background: #ccc; border: solid 1px #666; font: 8pt tahoma;"
                                    CommandName="Page" CommandArgument="<%# Container.DataItem %>"
                                    runat="server"><%# Container.DataItem %>

                                </asp:LinkButton>

                            </ItemTemplate>

                        </asp:Repeater>
                    </div>

                </tbody>
            </table>
        </div>
        <!--End Finerecord-->
        <div id="manager">

            <strong>Vi phạm nội quy (trong tháng)</strong>
            <table class="table table-striped table-framed table-centered" style="width: 506px; margin-top: 28px; position: absolute;">
                <thead>
                    <tr>
                        <th class="tdGrid tdCenterM">STT.</th>
                        <th class="tdGrid tdCenterM">Lý Do</th>
                        <th class="tdGrid tdCenterM">Tiền Phạt</th>
                        <th class="tdGrid tdCenterM">Ngày Phạt</th>
                        <th class="tdGrid tdCenterM">Người Phạt</th>
                    </tr>
                </thead>
                <tbody>
                    <asp:Repeater ID="rpFinerecord" runat="server">
                        <ItemTemplate>
                            <tr style="<%# ThuVien.FunctionsUtils.CSS_RowInTable(Container.ItemIndex,"#FFFFE0","#D7E3F2") %>">
                                <td class="tdGrid tdCenterM"><%# Container.ItemIndex + 1 %></td>
                                <td class="tdGrid tdCenterM"><%# Eval("LI_DO") %></td>
                                <td class="tdGrid tdCenterM">
                                    <%# ThuVien.FunctionsUtils.ConvertMoneyVND(Eval("TIEN_PHAT"))    
                                    %>VNĐ
                                </td>
                                <!--chua format date time-->
                                <td class="tdGrid tdCenterM">
                                    <%# 
                                            Convert.ToDateTime(Eval("NGAY_PHAT")).ToShortDateString()
                                    %>

                                </td>
                                <td class="tdGrid tdCenterM"><%# Eval("NGUOI_PHAT") %></td>
                            </tr>
                        </ItemTemplate>
                    </asp:Repeater>

                    <div style="overflow: hidden; position: absolute; margin-top: 5px;">
                        <asp:Repeater ID="rptPages" runat="server"
                            OnItemCommand="rptPages_ItemCommand1">

                            <ItemTemplate>

                                <asp:LinkButton ID="btnPage"
                                    Style="padding: 1px 3px; margin: 1px; background: #ccc; border: solid 1px #666; font: 8pt tahoma;"
                                    CommandName="Page" CommandArgument="<%# Container.DataItem %>"
                                    runat="server"><%# Container.DataItem %>

                                </asp:LinkButton>

                            </ItemTemplate>

                        </asp:Repeater>
                    </div>

                </tbody>
            </table>

        </div>
    </div>
    <!--End content no left_right-->



    <div id="no_left_right_content">
        <div id="user_statistic">
            <strong>Khen Thưởng (trong tháng)</strong>
            <table class="table table-striped table-framed table-centered" style="width: 506px; margin-top: 28px; position: absolute;">
                <thead>
                    <tr>
                        <th class="tdGrid tdCenterM">STT.</th>
                        <th class="tdGrid tdCenterM">Event</th>
                        <th class="tdGrid tdCenterM">Điểm</th>
                        <th class="tdGrid tdCenterM">Ngày</th>

                    </tr>
                </thead>
                <tbody>
                    <asp:Repeater ID="rpKhenThuong" runat="server">
                        <ItemTemplate>
                            <tr style="<%# ThuVien.FunctionsUtils.CSS_RowInTable(Container.ItemIndex,"#FFFFE0","#D7E3F2") %>">
                                <td class="tdGrid tdCenterM"><%# Container.ItemIndex + 1 %></td>
                                <td class="tdGrid tdCenterM"><%# Eval("EVENT") %></td>
                                <td class="tdGrid tdCenterM"><%# Eval("DIEM_THUONG") %></td>
                                <!--chua format date time-->
                                <td class="tdGrid tdCenterM">
                                    <%# Convert.ToDateTime(Eval("NGAY_KHEN_THUONG")).ToShortDateString() %>
                                </td>

                            </tr>
                        </ItemTemplate>
                    </asp:Repeater>

                    <div style="overflow: hidden; position: absolute; margin-top: 5px;">
                        <asp:Repeater ID="rptPages_KhenThuong" runat="server"
                            OnItemCommand="rptPages_ItemCommand_KhenThuong">

                            <ItemTemplate>

                                <asp:LinkButton ID="btnPage_KhenThuong"
                                    Style="padding: 1px 3px; margin: 1px; background: #ccc; border: solid 1px #666; font: 8pt tahoma;"
                                    CommandName="Page" CommandArgument="<%# Container.DataItem %>"
                                    runat="server"><%# Container.DataItem %>

                                </asp:LinkButton>

                            </ItemTemplate>

                        </asp:Repeater>
                    </div>

                </tbody>
            </table>
        </div>
        <div id="sale_statistic">

            <strong>Top 10 Nhân Viên Xuất Sắc Nhất Trong Tháng (Tính đến ngày
                <asp:Literal ID="ltGetMonthTop" runat="server"></asp:Literal>)</strong>
            <table class="table table-striped table-framed table-centered" style="width: 506px; margin-top: 28px; position: absolute;">
                <thead>
                    <tr>
                        <th class="tdGrid tdCenterM">STT.</th>
                        <th class="tdGrid tdCenterM">Tên Nhân Viên</th>
                        <th class="tdGrid tdCenterM">Cửa Hàng</th>
                        <th class="tdGrid tdCenterM">Điểm</th>
                    </tr>
                </thead>
                <tbody>
                    <asp:Repeater ID="rpTopUser" runat="server">
                        <ItemTemplate>
                            <tr style="<%# ThuVien.FunctionsUtils.CSS_RowInTable(Container.ItemIndex,"#FFFFE0","#D7E3F2") %>">
                                <td class="tdGrid tdCenterM"><%# Container.ItemIndex + 1 %></td>
                                <td class="tdGrid tdCenterM"><%#Eval("Name")%></td>
                                <td class="tdGrid tdCenterM"><%#Eval("CuaHang")%></td>
                                <td class="tdGrid tdCenterM"><%#Eval("TB")%></td>
                            </tr>
                        </ItemTemplate>
                    </asp:Repeater>

                    <div style="overflow: hidden; position: absolute; margin-top: 5px;">
                        <asp:Repeater ID="rptPages_TopUser" runat="server"
                            OnItemCommand="rptPages_ItemCommand_TopUser">

                            <ItemTemplate>

                                <asp:LinkButton ID="btnPage_TopUser"
                                    Style="padding: 1px 3px; margin: 1px; background: #ccc; border: solid 1px #666; font: 8pt tahoma;"
                                    CommandName="Page" CommandArgument="<%# Container.DataItem %>"
                                    runat="server"><%# Container.DataItem %>

                                </asp:LinkButton>

                            </ItemTemplate>

                        </asp:Repeater>
                    </div>

                </tbody>
            </table>
        </div>

    </div>
    <!--End content no left_right-->


</asp:Content>

